<!DOCTYPE html>
<html lang="zxx">

<head>
	<title>Tables </title>
	<!-- custom-theme -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
	<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
	<!-- //custom-theme -->
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<link rel="stylesheet" type="text/css" href="css/table-style.css" />
	<!-- <link rel="stylesheet" type="text/css" href="css/basictable.css" /> -->
	<link href="css/component.css" rel="stylesheet" type="text/css" media="all" />
	<!-- <link href="css/style_grid.css" rel="stylesheet" type="text/css" media="all" /> -->
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/bootstrap-table.css" rel="stylesheet" type="text/css" media="all" />
	<!-- font-awesome-icons -->
	<link href="css/font-awesome.css" rel="stylesheet">
	<!-- //font-awesome-icons -->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800"
		rel="stylesheet">
</head>
<script src="Plugins/vue.js"></script>
<script>
	window.onload = function () {
		var userRole = JSON.parse(localStorage.getItem("loginUrseData")).role;
		var vm = new Vue({
			el: "#gn-menun",
			data: {
				role: userRole
			}
		})
	}
</script>

<body>
	<!-- banner -->
	<div class="wthree_agile_admin_info">
		<!-- /w3_agileits_top_nav-->
		<!-- /nav-->
		<div class="w3_agileits_top_nav">
			<ul id="gn-menu" class="gn-menu-main">
				<!-- /nav_agile_w3l -->
				<li class="gn-trigger">
					<a class="gn-icon gn-icon-menu"><i class="fa fa-bars" aria-hidden="true"></i><span>Menu</span></a>
					<nav class="gn-menu-wrapper">
						<div class="gn-scroller scrollbar1">
							<ul class="gn-menu agile_menu_drop" id="gn-menun">
								<!-- <li>
										<a href="main-page.html"> <i class="fa fa-tachometer"></i> Dashboard</a>
									</li> -->
								<template v-bind: v-if="role === 1 || role === 2">
									<li>
										<a href="ACommunity.html"> <i class="fa fa-table"
												aria-hidden="true"></i>小区管理</a>
									</li>
								</template>
								<template v-bind: v-if="role === 1 || role === 2">
									<li>
										<a href="#"><i class="fa fa-cogs" aria-hidden="true"></i> 设备管理 <i
												class="fa fa-angle-down" aria-hidden="true"></i></a>
										<ul class="gn-submenu">
											<li class="mini_list_agile"><a href="ABarcode.html"><i
														class="fa fa-caret-right" aria-hidden="true"></i>
													二维码管理</a></li>
											<li class="mini_list_w3">
												<a href="ABeacon.html"> <i class="fa fa-caret-right"
														aria-hidden="true"></i> 信标管理</a>
											</li>
											<li class="mini_list_w3">
												<a href="ALift.html"> <i class="fa fa-caret-right"
														aria-hidden="true"></i> DTU管理</a>
											</li>
											<li class="mini_list_w3">
												<a href="generate_code.html"> <i class="fa fa-caret-right"
														aria-hidden="true"></i>二维码生成</a>
											</li>
										</ul>
									</li>
								</template>
								<template v-bind: v-if="role === 1 || role === 3 || role === 4">
									<li>
										<a href="#"> <i class="fa fa-file-text-o" aria-hidden="true"></i>申请权限管理 <i
												class="fa fa-angle-down" aria-hidden="true"></i></a>
										<ul class="gn-submenu">
											<li class="mini_list_agile"><a href="approve.html"><i
														class="fa fa-caret-right" aria-hidden="true"></i>已通过申请权限管理</a>
											</li>
											<li class="mini_list_w3"><a href="refuse.html"><i class="fa fa-caret-right"
														aria-hidden="true"></i>已拒绝申请权限管理</a></li>
											<li class="mini_list_w3"><a href="table.html"><i class="fa fa-caret-right"
														aria-hidden="true"></i>权限申请管理</a></li>
										</ul>
									</li>
								</template>
								<template v-bind: v-if="role === 1 || role === 3">
									<li>
										<a href="AUser.html"> <i class="fa fa-table" aria-hidden="true"></i>用户管理</a>
									</li>
								</template>
							</ul>
						</div>
						<!-- /gn-scroller -->
					</nav>
				</li>
				<!-- //nav_agile_w3l -->
				<li class="second logo">
					<h1><a href="manage.html"><i class="fa fa-graduation-cap" aria-hidden="true"></i>1智能呼梯管理平台</a>
					</h1>
				</li>
				<li class="second admin-pic">
					<ul class="top_dp_agile">
						<li class="dropdown profile_details_drop">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
								<div class="profile_img">
									<span class="prfil-img"><img src="images/admin.jpg" alt=""> </span>
								</div>
							</a>
							<ul class="dropdown-menu drp-mnu">
								<li> <a href="login.html"><i class="fa fa-sign-out"></i> 登出</a> </li>
							</ul>
						</li>

					</ul>
				</li>
				<li class="second top_bell_nav">
					<ul class="top_dp_agile ">
						<li class="dropdown head-dpdn">
							<a href="table.html"  id="tongzhiId" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><i
									class="fa fa-bell-o" aria-hidden="true"></i> <span class="badge blue"
									id="unreadCount"></span></a>
							<ul class="dropdown-menu">
								<li>
									<div class="notification_header">
										<h3>你的通知</h3>
									</div>
								</li>
								<li>
									<a href="table.html">
										<div class="notification_desc">
											<h6>你有<span style="color: red;" id="unreadCount"></span>个申请待处理</h6>
										</div>
										<div class="clearfix"></div>
									</a>
								</li>
								<div class="notification_bottom">
									<a href="table.html">查看详情</a>
								</div>
						</li>
					</ul>
				</li>

			</ul>
			</li>
			<li class="second top_bell_nav">
				<ul class="top_dp_agile ">
					<li class="dropdown head-dpdn">
						<ul class="dropdown-menu">
						</ul>
					</li>

				</ul>
			</li>
			<li></li>
			</ul>
			<!-- //nav -->
			<!-- //nav -->

		</div>
		<div class="clearfix"></div>
		<!-- //w3_agileits_top_nav-->
		<!-- /inner_content-->
		<div class="inner_content">
			<!-- /inner_content_w3_agile_info-->
			<!-- breadcrumbs -->
			<div class="w3l_agileits_breadcrumbs">
				<div class="w3l_agileits_breadcrumbs_inner">
					<ul>
						<li>首页<span>«</span></li>
						<li>设备管理<span>«</span></li>
						<li>二维码管理</li>
					</ul>
				</div>
			</div>
			<!-- //breadcrumbs -->

			<div class="inner_content_w3_agile_info two_in">
				<div id="container" class="container">
					<div class="agile-validation agile_info_shadow">
						<div class="validation-grids widget-shadow" data-example-id="basic-forms">
							<div class="input-info">
								<h3 class="w3_inner_tittle two">新增信标 :</h3>
							</div>
							<div class="form-body form-body-info">
								<form>
									<div class="form-group valid-form">
										<input type="text" class="form-control at-required" id="uuid"
											placeholder="请输入二维码编号" required="true" v-model="beacon.uuid"
											nkeyup="value=value.replace(/[^a-zA-Z]/ig,'')">
									</div>
									<div class="form-group valid-form">
										<input type="text" class="form-control at-required" id="latitude"
											placeholder="请输入经度" required="true" v-model="beacon.latitude">
									</div>
									<div class="form-group valid-form">
										<input type="text" class="form-control at-required" id="longitude"
											placeholder="请输入维度" required="true" v-model="beacon.longitude">
									</div>
									<div class="form-group">
										<select name="field-2" id="field-2" required="true" class="form-control"
											style="padding-top: 0px;padding-bottom: 0px;" v-model="beacon.liftId">
											<option value="" disabled selected hidden>请选择DTU</option>
											<option :value="types.liftId" v-for="types in typeList">{{types.address}}
											</option>
										</select>
									</div>
									<div class="form-group valid-form">
										<input type="text" class="form-control at-required" id="floor"
											placeholder="请输入楼层" required="true" v-model="beacon.floor">
									</div>
									<div class="form-group">
										<input type="button" class="btn btn-primary" @click="onSubmit()" value="提交" />
										<!-- <button type="submit" class="btn btn-primary" @click="onSubmit()">提交</button> -->
										&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;
										<a href="ABeacon.html" class="btn btn-primary">取消</a>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
				<!-- //inner_content_w3_agile_info-->
			</div>
			<!-- //inner_content-->
			<!--copy rights start here-->
			<div class="copyrights">
				<p>Copyright &copy; 2020.<a href="https://www.yungtay.com.cn/" target="_blank">1电梯设备(中国)有限公司
						沪ICP备16033938号</a></p>
			</div>
			<!--copy rights end here-->
			<!-- js -->
			<!-- 隐藏input为了保存拒绝的理由 -->
			<input type="hidden" name="" id="reason" value="" />
			<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
			<script src="js/modernizr.custom.js"></script>

			<script src="js/classie.js"></script>
			<script src="js/gnmenu.js"></script>
			<script>
				new gnMenu(document.getElementById('gn-menu'));
			</script>
			<!-- tables -->

			<script type="text/javascript">
				function formatDate(nowDate) {
					var year = nowDate.getFullYear();
					var month = nowDate.getMonth() + 1;
					month = month > 9 ? month : "0" + month;
					var date = nowDate.getDate();
					date = date > 9 ? date : "0" + date;
					var hour = nowDate.getHours();
					hour = hour > 9 ? hour : "0" + hour;
					var miunte = nowDate.getMinutes();
					miunte = miunte > 9 ? miunte : "0" + miunte;
					var second = nowDate.getSeconds();
					second = second > 9 ? second : "0" + second;
					return year + "-" + month + "-" + date + " " + hour + ":" + miunte + ":" + second;
				}
			</script>
			<!-- //js -->
			<script src="js/screenfull.js"></script>
			<script>
				$(function () {
					$('#supported').text('Supported/allowed: ' + !!screenfull.enabled);

					if (!screenfull.enabled) {
						return false;
					}

					$('#toggle').click(function () {
						screenfull.toggle($('#container')[0]);
					});
				});
			</script>
			<script src="js/jquery.nicescroll.js"></script>
			<script src="js/scripts.js"></script>

			<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
			<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
			<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
			<script type="text/javascript" src="js/table.js"></script>
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
									aria-hidden="true">×</span></button>
							<h4 class="modal-title" id="myModalLabel">拒绝理由</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<textarea class="form-control" id="deblock_udid" name="deblock_udid" rows="16"
									style="min-width: 90%"></textarea>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal"><span
									class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消</button>
							<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span
									class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>提交</button>
						</div>
					</div>
				</div>
			</div>
			<script src="Plugins/jquery-2.1.0.js"></script>
			<script src="Plugins/layui/layui.js"></script>
			<script src="Plugins/vue.js"></script>
			<script src="js/common.js"></script>
			<script>
				var my_token = JSON.parse(localStorage.getItem("loginUrseData")).token;
				var vm = new Vue({
					el: "#container",
					data: {
						typeList: [],
						beacon: {
							uuid: '',
							latitude: 31.136,
							longitude: 121.314,
							liftId: '',
							floor: '',
							address: '',
						}
					},
					mounted: function () {
						setTimeout(function () {
							vm.roleList();
						});
					},
					methods: {
						//获取角色列表
						roleList: function () {
							var url = "https://ytcloud2.yungtay.com.cn:1443/proServer/api/lift/getList?address=";

							$.ajax({
								type: "GET",
								url: url,
								success: function (res) {
									console.log(res);
									if (res.code == 200) {
										vm.typeList = res.data;
									} else {
										alert('获取信息失败！');
									}
								},
								error: function () {
					alert('登陆过期,请重新登录')
					window.location.href = "login.html";
									alert('获取信息失败！');
								}
							});
						},
						onSubmit() {
							var layer = '';
							layui.use('layer', function () {
								layer = layui.layer;
							});
							if (!vm.beacon.uuid) {
								layer.msg('请填写uuid！');
								return
							} else if (!vm.beacon.liftId) {
								layer.msg('请选择DTU！');
								return
							} else if (!vm.beacon.floor) {
								layer.msg('请填写楼层！');
								return
							} else {
								var regName = /^[0-9a-zA-Z]{8}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{12}$/;
								if (!regName.test(vm.beacon.uuid)) {
									layer.msg('信标编号格式错误，正确格式为：FDA50693-A4E2-4FB1-AFCF-C6EB07647837');
									return;
								}
							}
							console.log(vm.beacon)
							var url = "https://ytcloud2.yungtay.com.cn:1443/proServer/api/beacon/add";
							// var url = "http://10.21.30.26:9090/proServer/api/beacon/add";
							var result = vm.typeList.find((item) => { //model就是上面的数据源
								return item.liftId === vm.beacon.liftId; //筛选出匹配数据
							})
							vm.beacon.liftId = result.liftId
							vm.beacon.address = result.address
							console.log(vm.beacon)
							$.ajax({
								type: "post",
								url: url,
								contentType: 'application/json;charset=utf-8',
								headers: {
									Token: my_token //这里是Token
								},
								data: JSON.stringify(vm.beacon),
								success: function (res) {
									if (res.code === 200) {
										window.location.href = "ABeacon.html";
										layer.msg("添加成功");
									} else {
										layer.msg(res.message);
									}
								},
								error: function () {
					alert('登陆过期,请重新登录')
					window.location.href = "login.html";
									layer.msg("服务器繁忙")
								}
							});
						}
					}
				})
			</script>
</body>

</html>